{% extends "header.html" %}
{% load  web_tag %}
{% block conten %}
<!-- DataTables -->
  <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css">

<style>
 #top_control a {width:80px;float:right;margin-right: 10px;margin-top: 0px;color:#3c8dbc;}
 </style>
 

	<div style="margin-bottom: 15px;margin-top: -45px;" id="top_control">
	 <a data-toggle="modal" data-target="#myModal" class="btn btn-block btn-default btn-flat">添加主机</a>
	
	
	<div style="clear:both"></div>
	</div>




<style>
#task table td {line-height:34px;}
</style>

<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <div class="box-header">
        <h3 class="box-title"><a href="/application/app/{{cluster.toproject.id}}/">{{cluster.toproject.name}}</a> >> {{cluster.name}} > 主机列表</h3>
      </div><!-- /.box-header -->
      <div class="box-body" id="task" >
        <table id="example2" class="table table-bordered table-hover">
          <thead>
            <tr>
		      	<th>IP</th>
		      	<th>主机名</th>
		      	<th>区域</th>
		      	<th>状态</th>
		      	<th>机房</th>
		      	<th>操作</th>
		      </tr>
          </thead>
          <tbody>
             {% for x in host %}
		      <tr>
		      	<td>{{x.ip}}</td>
		      	<td>{{x.name}}</td>
		      	<td>{{x.towhere.name}}</td>
		      	<td><span class="label {% ReturnSpanClass x.toenv.name %}"> {{x.toenv.name}} </span></td>
		      	<td>{{x.toroom.name}}</td>
		       	<td style="width:60px;">
		       		<a class="btn btn-danger" href="/application/cluster/host/del/{{id}}/{{x.id}}/">
						<i class="halflings-icon white fa fa-fw fa-trash"></i> 
					</a>
				</td>
		      </tr>
		      {% endfor %}
          </tbody>
        </table>
      </div><!-- /.box-body -->
    </div><!-- /.box -->
  </div><!-- /.col -->
</div><!-- /.row -->




<div class="modal fade" id="myModal">
    <div class="modal-dialog" style="width: 800px;">
      <div class="modal-content" style="margin-top: 100px;">
      <form action="" method="post" >
        
        <div class="box" style="border-top: 0px;padding: 15px;">
 		<!-- /.box-header -->
 			<div class="box-body" >
   				<table id="example1" class="table table-bordered table-striped">
     			<thead>
     				<tr>
     					<th style="width:10px;">#</th>
				     	<th>IP</th>
				     	<th>状态</th>
				     	<th>机房</th>
				     	<th>区域</th>
			     	</tr>
     			</thead>
     			<tbody>
				     {% for x in assets %}
				     <tr>
				     	<td>
				     	<div class="form-group">
		                    <label>
		                      <input type="checkbox" class="minimal" id='hostselect' name='hostselect' value='{{x.id}}'>
		                    </label>
		                  </div>
						</td>
				     	<td>{{x.ip}}</td>
				     	<td>{{x.toenv.name}}</td>
				     	<td>{{x.toroom.name}}</td>
				       <td>{{x.towhere.name}}</td>
				     </tr>
				     {% endfor %}
			     </tbody>
   			</table>
 	</div>
 <!-- /.box-body -->
</div>
          	
          	
          	
          	
          	
          	
          	
          	
         
         <div class="modal-footer" style="border-top:none;">
         <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
         <button type="submit" class="btn btn-primary">确定</button>
       </div>
       </form>
         </div>
     </div>
          
</div>


























<!-- DataTables -->
<script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- page script -->



<!-- Select2 -->
<script src="/static/plugins/select2/select2.full.min.js"></script>
<!-- InputMask -->
<script src="/static/plugins/input-mask/jquery.inputmask.js"></script>
<script src="/static/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
<script src="/static/plugins/input-mask/jquery.inputmask.extensions.js"></script>
<!-- date-range-picker -->
<script src="/static/js/moment.min.js"></script>
<script src="/static/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="/static/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
<!-- bootstrap time picker -->
<script src="/static/plugins/timepicker/bootstrap-timepicker.min.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- iCheck 1.0.1 -->
<script src="/static/plugins/iCheck/icheck.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!-- Page script -->

<script>
  $(function () {
    //Initialize Select2 Elements
    $(".select2").select2();

    //Datemask dd/mm/yyyy
    $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
    //Datemask2 mm/dd/yyyy
    $("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
    //Money Euro
    $("[data-mask]").inputmask();

    //Date range picker
    $('#reservation').daterangepicker();
    //Date range picker with time picker
    $('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
    //Date range as a button
    $('#daterange-btn').daterangepicker(
        {
          ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          startDate: moment().subtract(29, 'days'),
          endDate: moment()
        },
        function (start, end) {
          $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }
    );

    //iCheck for checkbox and radio inputs
    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_minimal-blue'
    });
    //Red color scheme for iCheck
    $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
      checkboxClass: 'icheckbox_minimal-red',
      radioClass: 'iradio_minimal-red'
    });
    //Flat red color scheme for iCheck
    $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
      checkboxClass: 'icheckbox_flat-green',
      radioClass: 'iradio_flat-green'
    });

    //Colorpicker
    $(".my-colorpicker1").colorpicker();
    //color picker with addon
    $(".my-colorpicker2").colorpicker();

    //Timepicker
    $(".timepicker").timepicker({
      showInputs: false
    });
  });
</script>







<script>
  $(function () {
    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });
</script>


{% endblock %}